<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Float Layout</title>

<style>
* {
box-sizing:border-box;
margin:0;
padding:0;
}
ul{
list-style-type: disc;
list-style-position: outside;
margin-left:20px;
}
[class*="col-"] {
padding:20px;
float:left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-4,
.col-6{
background-color:Azure;
}
cl3-4{
border:20px solid #fff;
float:left;
width:100%;
overflow:hidden;
background:Cyan;
position:relative;
}
cl2-4{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(33% - 2%);
background:Cyan;
position:relative;
}
cl1-4{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(33% - 0%);
background:Cyan;
position:relative;
}
[col1-4]{
float:left;
width:29%;
left:calc(69% + 0%);
position:relative;
}
[col2-4]{
float:left;
width:29%;
left:calc(73% + 4%);
position:relative;
}
[col3-4]{
float:left;
width:29%;
left:calc(77% + 8%);
position:relative;
}
cl2-6{
border:20px solid #fff;
float:left;
width:100%;
overflow:hidden;
background:Cyan;
position:relative;
}
cl1-6{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(50% - 2%);
background:Cyan;
position:relative;
}
[col1-6]{
float:left;
width:46%;
left:52%;
position:relative;
}
[col2-6]{
float:left;
width:46%;
left:calc(56% + 2%);
position:relative;
}
cl4-3{
border:20px solid #fff;
float:left;
width:100%;
overflow:hidden;
background:Cyan;
position:relative;
}
cl3-3{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(25% - 15px);
background:Cyan;
position:relative;
}
cl2-3{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(25% - 10px);
background:Cyan;
position:relative;
}
cl1-3{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(25% - 5px);
background:Cyan;
position:relative;
}
cl6-2{
border:20px solid #fff;
float:left;
width:100%;
overflow:hidden;
background:Cyan;
position:relative;
}
cl5-2{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(16.66% - 16.65px);
background:Cyan;
position:relative;
}
cl4-2{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(16.66% - 13.32px);
background:Cyan;
position:relative;
}
cl3-2{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(16.66% - 9.99px);
background:Cyan;
position:relative;
}
cl2-2{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(16.66% - 6.66px);
background:Cyan;
position:relative;
}
cl1-2{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(16.66% - 3.33px);
background:Cyan;
position:relative;
}
cl12-1{
border:20px solid #fff;
float:left;
width:100%;
overflow:hidden;
background:Cyan;
position:relative;
}
cl11-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 18.33px);
background:Cyan;
position:relative;
}
cl10-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 16.67px);
background:Cyan;
position:relative;
}
cl9-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 15.01px);
background:Cyan;
position:relative;
}
cl8-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 13.35px);
background:Cyan;
position:relative;
}
cl7-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 11.69px);
background:Cyan;
position:relative;
}
cl6-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 10.03px);
background:Cyan;
position:relative;
}
cl5-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 8.37px);
background:Cyan;
position:relative;
}
cl4-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 6.71px);
background:Cyan;
position:relative;
}
cl3-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 5.05px);
background:Cyan;
position:relative;
}
cl2-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 3.39px);
background:Cyan;
position:relative;
}
cl1-1{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(8.33% - 1.73px);
background:Cyan;
position:relative;
}
[col1-1]{
float:left;
width:4.33%;
left:93.67%;
position:relative;
}
[col2-1]{
float:left;
width:4.33%;
left:calc(97.67% + 20px);
position:relative;
}
[col3-1]{
float:left;
width:4.33%;
left:calc(101.67% + 40px);
position:relative;
}
[col4-1]{
float:left;
width:4.33%;
left:calc(105.67% + 60px);
position:relative;
}
[col5-1]{
float:left;
width:4.33%;
left:calc(109.67% + 80px);
position:relative;
}
[col6-1]{
float:left;
width:4.33%;
left:calc(113.67% + 100px);
position:relative;
}
[col7-1]{
float:left;
width:4.33%;
left:calc(117.67% + 120px);
position:relative;
}
[col8-1]{
float:left;
width:4.33%;
left:calc(121.67% + 140px);
position:relative;
}
[col9-1]{
float:left;
width:4.33%;
left:calc(125.67% + 160px);
position:relative;
}
[col10-1]{
float:left;
width:4.33%;
left:calc(129.67% + 180px);
position:relative;
}
[col11-1]{
float:left;
width:4.33%;
left:calc(133.67% + 200px);
position:relative;
}
[col12-1]{
float:left;
width:4.33%;
left:calc(137.67% + 220px);
position:relative;
}
[col1-2]{
float:left;
width:11.66%;
left:85.34%;
position:relative;
}
[col2-2]{
float:left;
width:11.66%;
left:calc(89.34% + 25px);
position:relative;
}
[col3-2]{
float:left;
width:11.66%;
left:calc(93.34% + 50px);
position:relative;
}
[col4-2]{
float:left;
width:11.66%;
left:calc(97.34% + 75px);
position:relative;
}
[col5-2]{
float:left;
width:11.66%;
left:calc(101.34% + 100px);
position:relative;
}
[col6-2]{
float:left;
width:11.66%;
left:calc(105.34% + 125px);
position:relative;
}
[col1-3]{
float:left;
width:21%;
left:77%;
position:relative;
}
[col2-3]{
float:left;
width:21%;
left:calc(81% + 20px);
position:relative;
}
[col3-3]{
float:left;
width:21%;
left:calc(85% + 40px);
position:relative;
}
[col4-3]{
float:left;
width:21%;
left:calc(89% + 60px);
position:relative;
}
[col1-12]{
float:left;
width:100%;
position:relative;
}
cl-r{
border:20px solid #fff;
float:left;
width:100%;
overflow:hidden;
background:Cyan;
position:relative;
}
cl-3{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(25% - 15px);
background:Cyan;
position:relative;
}
cl-6{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(50% - 0%);
background:Cyan;
position:relative;
}
cl-9{
border-right:20px solid #fff;
float:left;
width:100%;
right:calc(75% - 2%);
background:Cyan;
position:relative;
}
[col-1-3]{
float:left;
width:21%;
left:77%;
position:relative;
}
[col-2-3]{
float:left;
width:21%;
left:calc(56% + 20px);
position:relative;
}
[col-3-3]{
float:left;
width:21%;
left:calc(58% + 40px);
position:relative;
}
[col-4-3]{
float:left;
width:21%;
left:calc(85% + 40px);
position:relative;
}
[col-1-6]{
float:left;
width:46%;
left:calc(52% + 0%);
position:relative;
}
[col-2-6]{
float:left;
width:46%;
left:calc(81% + 4%);
position:relative;
}
nav,
aside{
padding: 100px 0px;
}
header,
footer{
padding:20px;
}
nav,
aside,
article{
text-align:center;
}
nav,
aside{
height:200px;
}
[no-pd] {
padding:0;
}
[no-br]{
border-bottom:none;
}
[rv-br]{
border-bottom:none;
}
cl12-1,
cl6-2,
cl4-3,
cl3-4,
cl2-6,
cl-r{
border-top:none;
}
@media (max-width:500px) {
nav,
article {
width:100%;
height:auto;
}
[rv-br]{
border-bottom: 20px solid #fff;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12{

width:100%;

}
cl3-4,
cl2-4,
cl1-4,
cl2-6,
cl1-6,
cl4-3,
cl3-3,
cl2-3,
cl1-3,
cl6-2,
cl5-2,
cl4-2,
cl3-2,
cl2-2,
cl1-2,
cl12-1,
cl11-1,
cl10-1,
cl9-1,
cl8-1,
cl7-1,
cl6-1,
cl5-1,
cl4-1,
cl3-1,
cl2-1,
cl1-1,
cl-3,
cl-6,
cl-9,
cl-r,
[col-1-6],
[col-2-6],
[col-1-3],
[col-2-3],
[col-3-3],
[col-4-3],
[col1-1],
[col2-1],
[col3-1],
[col4-1],
[col5-1],
[col6-1],
[col7-1],
[col8-1],
[col9-1],
[col10-1],
[col11-1],
[col12-1],
[col1-4],
[col2-4],
[col3-4],
[col1-6],
[col2-6],
[col1-3],
[col2-3],
[col3-3],
[col4-3],
[col1-2],
[col2-2],
[col3-2],
[col4-2],
[col5-2],
[col6-2]{
width:100%;
position:static;
}
cl-r,
cl2-6,
cl3-4,
cl4-3,
cl6-2,
cl12-1{
border-top:none;
border-bottom:none;
}
cl-3,
cl-6,
cl-9,
cl2-4,
cl1-4,
cl1-6,
cl3-3,
cl2-3,
cl1-3,
cl5-2,
cl4-2,
cl3-2,
cl2-2,
cl1-2,
cl11-1,
cl10-1,
cl9-1,
cl8-1,
cl7-1,
cl6-1,
cl5-1,
cl4-1,
cl3-1,
cl2-1,
cl1-1{
border-right:none;
}
[col-1-6],
[col-2-6],
[col-1-3],
[col-2-3],
[col-3-3],
[col-4-3],
[col11-1],
[col10-1],
[col9-1],
[col8-1],
[col7-1],
[col6-1],
[col5-1],
[col4-1],
[col3-1],
[col2-1],
[col1-1],
[col1-6],
[col5-2],
[col4-2],
[col3-2],
[col2-2],
[col1-2],
[col2-4],
[col1-4],
[col3-3],
[col2-3],
[col1-3]{
border-bottom:20px solid #fff;
}
[no-br]{
border-bottom:none;
}
}
</style>
</head>
<body>


<header col1-12>
<h1>
Header
</h1>
</header>

<cl3-4>
<cl2-4>
<cl1-4>
<aside col1-4>
<h3>
Aside
</h3>
</aside>
<aside col2-4>
<h3>
Aside
</h3>
</aside>
<aside col3-4 rv-br>
<h3>
Aside
</h3>
</aside>
</cl1-4>
</cl2-4>
</cl3-4>

<cl2-6>
<cl1-6>
<aside col1-6>
<h3>
Aside
</h3>
</aside>
<aside col2-6 rv-br>
<h3>
Aside
</h3>
</aside>
</cl1-6>
</cl2-6>

<cl4-3>
<cl3-3>
<cl2-3>
<cl1-3>
<aside col1-3>
<h3>
Aside
</h3>
</aside>
<aside col2-3>
<h3>
Aside
</h3>
</aside>
<aside col3-3>
<h3>
Aside
</h3>
</aside>
<aside col4-3 rv-br>
<h3>
Aside
</h3>
</aside>
</cl1-3>
</cl2-3>
</cl3-3>
</cl4-3>

<cl6-2>
<cl5-2>
<cl4-2>
<cl3-2>
<cl2-2>
<cl1-2>
<aside col1-2>
<h3>
Aside
</h3>
</aside>
<aside col2-2>
<h3>
Aside
</h3>
</aside>
<aside col3-2>
<h3>
Aside
</h3>
</aside>
<aside col4-2>
<h3>
Aside
</h3>
</aside>
<aside col5-2>
<h3>
Aside
</h3>
</aside>
<aside col6-2 rv-br>
<h3>
Aside
</h3>
</aside>
</cl1-2>
</cl2-2>
</cl3-2>
</cl4-2>
</cl5-2>
</cl6-2>

<cl12-1>
<cl11-1>
<cl10-1>
<cl9-1>
<cl8-1>
<cl7-1>
<cl6-1>
<cl5-1>
<cl4-1>
<cl3-1>
<cl2-1>
<cl1-1>
<aside col1-1>
<h3>
D
</h3>
</aside>
<aside col2-1>
<h3>
A
</h3>
</aside>
<aside col3-1>
<h3>
F
</h3>
</aside>
<aside col4-1>
<h3>
E
</h3>
</aside>
<aside col5-1>
<h3>
B
</h3>
</aside>
<aside col6-1>
<h3>
C
</h3>
</aside>
<aside col7-1>
<h3>
U
</h3>
</aside>
<aside col8-1>
<h3>
V
</h3>
</aside>
<aside col9-1>
<h3>
W
</h3>
</aside>
<aside col10-1>
<h3>
X
</h3>
</aside>
<aside col11-1>
<h3>
Y
</h3>
</aside>
<aside col12-1 rv-br>
<h3>
Z
</h3>
</aside>
</cl1-1>
</cl2-1>
</cl3-1>
</cl4-1>
</cl5-1>
</cl6-1>
</cl7-1>
</cl8-1>
</cl9-1>
</cl10-1>
</cl11-1>
</cl12-1>

<cl-r>
<cl-3>
<cl-6>
<aside col-1-3>
<h3>
Aside
</h3>
</aside>
<aside col-2-6>
<h3>
Aside
</h3>
</aside>
<aside col-4-3 rv-br>
<h3>
Aside
</h3>
</aside>
</cl-6>
</cl-3>
</cl-r>

<cl-r no-br>
<cl-3>
<cl-3>
<aside col-1-6>
<h3>
Aside
</h3>
</aside>
<aside col-2-3>
<h3>
Aside
</h3>
</aside>
<aside col-3-3 no-br>
<h3>
Aside
</h3>
</aside>
</cl-3>
</cl-3>
</cl-r>



<footer col1-12>
<p>
Footer
</p>
</footer>


</body>
</html>